<!DOCTYPE html>
<html>
  <head>
    <style>
      #app {
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="app">
        <v-chart ref="chart" :option="option" autoresize />
    </div>
    <script src="../js/vue.js"></script>
    <script src="../js/echarts.js"></script>
    <script src="../js/vue-echarts.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script>
      Vue.component('v-chart', VueECharts);

      new Vue({
        el: '#app',
        data() {
          return {
            option: {
              title: {
                text: '国宾旅游套餐人数统计',
                left: 'center',
              },
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)',
              },
              legend: {
                orient: 'vertical',
                left: 'left',
                data: [],
              },
              series: [
                {
                  name: '国宾旅游套餐人数统计',
                  type: 'pie',
                  radius: '80%',
                  center: ['50%', '55%'],
                  data: [],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                  },
                },
              ],
            },
           
          };
        },
        created() {
          this.fetchChartData();
        },
        methods: {
          fetchChartData() {
            axios.get('http://localhost:8090/report/setmealBooking')
              .then(response => {
                this.option.legend.data = response.data.map(item => item.name);
                this.option.series[0].data = response.data;
                this.updateChart();
              })
              .catch(error => {
                console.error(error);
              });

          },
          updateChart() {
            const chart = this.$refs.chart;
            if (chart) {
              chart.clear();
              chart.setOption(this.option);
            }
          },
        },
      });
    </script>
  </body>
</html>
